<!--
 * @Author: your name
 * @Date: 2020-05-19 18:04:01
 * @LastEditTime: 2020-09-02 18:22:53
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /vue-cli4-multi/src/modules/front/pages/GattTable/components/GattLeft/index.vue
 -->
<template>
  <div ref="gatt_table"
    class="gatt-table">
    <div class="gatt-thead" :style="{width: widthTable + 'px'}">
      <div class="gatt-th"
        :key="key"
        v-for="(th,key) in headData"
        v-show="!th.hideHead"
      >
        <div class="cell"
          :style="{width:th.width ? th.width+'px' : '80px'}"
        >
          {{th.value}}
        </div>
      </div>
    </div>
    <div class="gatt-tbody"
      ref="gattTbody"
      :style="{width: widthTable + 'px'}"
      v-debounce.scroll.stop="{fun: 'tableScroll'}">
      <gatttable-tr
        @handleClick="handleClick"
        @change="change"
        :allData="data"
        :data="data"
        ref="gatttableTr"
        :headData="headData"
      >
      </gatttable-tr>
    </div>
  </div>
</template>

<script>
import Bus from '@front/common/bus.js'
import GatttableTr from './components/GatttableTr.vue'
export default {
  name: '',
  props: {
    headData: {
      type: Object,
      default: () => {}
    },
    data: {
      type: Array,
      default: () => []
    },
    uuId: String
  },
  computed: {
    widthTable () {
      let sum = 0
      let w = 0
      for (const key in this.headData) {
        if (!this.headData[key].hideHead) {
          if (this.headData[key].width) {
            w = ~~this.headData[key].width
          } else {
            w = 80
          }
        } else {
          w = 0
        }
        sum += w
      }
      return sum
    }
  },
  components: {
    GatttableTr
  },
  data () {
    return {}
  },
  mounted () {
    this.getScrollTop()
  },
  methods: {
    change (data) {
      this.$emit('change', data)
    },
    handleClick (data) {
      this.$emit('handleClick', data)
    },
    // eslint-disable-next-line camelcase
    change_calendar (data) {
      this.$emit('change-calendar', data)
    },
    tableScroll () {
      this.$nextTick(() => {
        const scrolled = this.$refs.gattTbody.scrollTop
        // eslint-disable-next-line no-undef
        Bus.$emit('gattViewTableScroll', { scrolled, uuid: this.uuId })
      })
    },
    getScrollTop () {
      Bus.$on('gattViewScroll', d => {
        this.$nextTick(() => {
          if (this.uuId === d.uuid) {
            this.$refs.gattTbody.scrollTop = d.scrolled
          }
        })
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.gatt-table
  font-size 14px
  display table
  table-layout fixed
  word-break break-all
  position relative
  width 100%
  overflow-x auto
  overflow-y hidden
  height 100%
  &::-webkit-scrollbar
    width 5px
    height 5px
  &::-webkit-scrollbar-track
    box-shadow inset 0 0 6px rgba(0, 0, 0, 0.1)
    border-radius 10px
    background-color #F5F5F5
  &::-webkit-scrollbar-thumb
    border-radius 10px
    box-shadow inset 0 0 6px rgba(0, 0, 0, .1)
    background-color #ccc
  .gatt-thead
    line-height 44px
    height 44px
    background-color #F3F3F3
    .gatt-th
      display table-cell
      overflow hidden
      user-select none
      text-align left
      color #909399
      font-weight bold
      text-overflow ellipsis
      vertical-align middle
      white-space nowrap
      border-bottom 1px solid #ebeef5
      border-right 1px solid #ebeef5
      line-height 43px
      background-color #F3F3F3
      .cell
        position relative
        word-wrap normal
        overflow hidden
        text-overflow ellipsis
        vertical-align middle
        width 100%
        box-sizing border-box
        padding 0 10px
        min-height 16px
  .gatt-tbody
    position relative
    height calc(100% - 44px)
    overflow-x hidden
    overflow-y auto
    &::-webkit-scrollbar
      width 5px
      height 5px
    &::-webkit-scrollbar-track
      box-shadow inset 0 0 6px rgba(0, 0, 0, 0.1)
      border-radius 10px
      background-color #F5F5F5
    &::-webkit-scrollbar-thumb
      border-radius 10px
      box-shadow inset 0 0 6px rgba(0, 0, 0, .1)
      background-color #ccc
</style>
